<template>
	<view class="ticket">
		<Navbar>繁殖</Navbar>
		<scroll-view scroll-y class="scroll_view">
			<view class="content">
				<!-- <image :src="`${baseImageUrl}/other/1.png`" class="cover"></image> -->
				<image :src="cover" class="cover"></image>
				<view class="banner">
					<view class="name">
						<view>【{{name}}】</view>
						<view class="label" v-if="status==30">携带中</view>
					</view>
					<view class="progress_box">
						<view>生命值：</view>
						<view class="progress_view">
							<view class="progress" :style="{width:width+'%'}"></view>
							<view class="text">{{health}}/100</view>
						</view>
					</view>
					<view class="sub_title">
						<image :src="`${baseImageUrl}/home/xs.png`"></image>
						<text>宠物技能</text>
						<image :src="`${baseImageUrl}/home/xs.png`"></image>
					</view>
					<view class="list">
						<view class="item" v-for="item in skill">
							<view class="icon">
								<image :src="item.skill.img"></image>
							</view>
							<text>{{item.skill.name}}</text>
						</view>
					</view>
				</view>
				<view class="tabs">
					<view class="item" @click="open(1)">
						<image :src="`${baseImageUrl}/home/p1.png`"></image>
						<view>补充能量</view>
					</view>
					<view class="item" @click="open(2)">
						<image :src="`${baseImageUrl}/home/p2.png`"></image>
						<view>技能洗练</view>
					</view>
					<view class="item" @click="router(`/pages/home/pet_compose?id=${composer_id}`)">
						<image :src="`${baseImageUrl}/home/p3.png`"></image>
						<view>宠物合成</view>
					</view>
					<view class="item" @click="open(3)">
						<image :src="`${baseImageUrl}/home/p4.png`"></image>
						<view>学习技能</view>
					</view>
					<view class="item" @click="router('/pages/home/pet_sell')">
						<image :src="`${baseImageUrl}/home/p5.png`"></image>
						<view>出售中心</view>
					</view>
				</view>
				<scroll-view scroll-x class="scroll_box">
					<!-- 	<view class="item" :class="item.status==30?'active':''" v-for="(item,index) in list"
						@click="look(item)"> -->
					<view class="item" :class="pet_id==item.id?'active':''" v-for="(item,index) in list"
						@click="look(item)">
						<image :src="item.product_cover"></image>
						<view>{{item.product_name}}</view>
					</view>
				</scroll-view>
			</view>
		</scroll-view>
		<u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<PetPopup />

		<!-- 	<Energy :pet_id="pet_id" @close="getSkillInfo" v-if="popup==1" />
			<SuccinctList @close="close" @confirm="confirm" v-if="popup==2" />
			<StudyList @close="close" @confirm="popup=5" v-if="popup==3" /> -->
			
			
			<SuccinctResult @close="close" v-if="popup==4" />
			<StudyResult @close="close" v-if="popup==5" />
			<PetDeta :res="res" @close="popup_show=false" @sell="popup=7" @carry="popup=8" v-if="popup==6" />
			<PetSell :res="res" @close="close" v-if="popup==7" />
			<CarryPopup :res="res" @close="close" v-if="popup==8" />
		</u-popup>

		<!-- <u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<Energy :pet_id="pet_id" @close="getSkillInfo" v-if="popup==1" />
			<SuccinctList @close="close" @confirm="confirm" v-if="popup==2" />
			<StudyList @close="close" @confirm="popup=5" v-if="popup==3" />
			<SuccinctResult @close="close" v-if="popup==4" />
			<StudyResult @close="close" v-if="popup==5" />
			<PetDeta :res="res" @close="popup_show=false" @sell="popup=7" @carry="popup=8" v-if="popup==6" />
			<PetSell :res="res" @close="close" v-if="popup==7" />
			<CarryPopup :res="res" @close="close" v-if="popup==8" />
		</u-popup> -->
	</view>
</template>

<script>
	import {
		skillMy,
		skillInfo
	} from '@/request/api.js';
	
	import PetPopup from '@/components/home/PetPopup.vue';
	
	import Energy from '@/components/home/Energy.vue';
	import SuccinctList from '@/components/home/SuccinctList.vue';
	import StudyList from '@/components/home/StudyList.vue';
	import SuccinctResult from '@/components/home/SuccinctResult.vue';
	import StudyResult from '@/components/home/StudyResult.vue';
	import PetDeta from '@/components/home/PetDeta.vue';
	import PetSell from '@/components/home/PetSell.vue';
	import CarryPopup from '@/components/home/CarryPopup.vue';
	export default {
		components: {
			Energy,
			SuccinctList,
			StudyList,
			SuccinctResult,
			StudyResult,
			PetDeta,
			PetSell,
			CarryPopup
		},
		data() {
			return {
				// active: 0,
				list: [],

				composer_id: null,

				cover: "",
				name: "",
				health: "",
				width: 0,

				skill: [],
				status: null,

				res: {},
				pet_id: "",
				popup_show: false,
				popup: 1
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			async getList() {
				let {
					pet,
					default_order,
					composer_id
				} = await skillMy();
				this.list = pet;
				this.composer_id = composer_id;

				if (default_order) {
					this.pet_id = default_order;
					this.getSkillInfo();
				} else {
					this.pet_id = "";
				}
			},
			async getSkillInfo() {
				this.popup_show = false;
				let res = await skillInfo({
					id: this.pet_id
				});
				this.res = res;

				this.cover = res.pet.product_cover;
				this.name = res.pet.product_name;
				let health = this.health = res.pet.health;
				this.width = health > 100 ? 100 : health;
				this.skill = res.skill;
				this.status = res.pet.status;
			},
			open(index) {
				this.popup = index;
				this.popup_show = true;
			},
			close() {
				this.popup_show = false;
				this.getList();
			},
			async look(item) {
				this.pet_id = item.id;
				this.getSkillInfo();
				setTimeout(() => {
					this.open(6);
				}, 500);
			},
			// 洗练技能回调
			async confirm() {
				this.popup = 4;
			}
		}
	}
</script>

<style scoped lang="scss">
	.ticket {
		height: 100vh;
		background: #29170D;
		overflow: hidden;

		.scroll_view {
			height: calc(100vh - #{$navbarHeight});
			position: relative;

			.content {
				position: absolute;
				left: 0;
				top: -110rpx;
				width: 100%;
				padding-top: 234rpx;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/bg/bg8.png) no-repeat;
				background-size: 100% 760rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.cover {
					width: 300rpx;
					height: 300rpx;
				}

				.banner {
					width: 690rpx;
					height: 420rpx;
					margin-top: 92rpx;
					padding: 50rpx 44rpx 30rpx;
					box-sizing: border-box;
					background: url(#{$baseImageUrl}/bg/690_420.png) no-repeat;
					background-size: 100% 760rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						width: 100%;
						height: 50rpx;
						position: relative;

						view {
							width: 100%;
							line-height: 50rpx;
							text-align: center;
							color: #494338;
							font-size: 50rpx;
							font-weight: 400;
							font-family: LiSu;
						}

						.label {
							width: 106rpx;
							height: 46rpx;
							line-height: 46rpx;
							text-align: center;
							color: #FFFFFF;
							font-size: 26rpx;
							font-weight: 400;
							font-family: SimSun;
							background: url(#{$baseImageUrl}/common/label5.png) no-repeat;
							background-size: 100% 100%;
							position: absolute;
							right: 0rpx;
							top: 2rpx;
							z-index: 2;
						}
					}

					.progress_box {
						display: flex;
						align-items: center;

						.key {
							color: #494338;
							font-size: 42rpx;
							font-weight: 400;
							font-family: LiSu;
						}

						.progress_view {
							flex: 1;
							height: 25rpx;
							background: #B4A88E;
							box-shadow: 0px 0px 4rpx 0px rgba(110, 93, 72, 0.67);
							position: relative;

							.text {
								width: 100%;
								height: 25rpx;
								line-height: 25rpx;
								text-align: center;
								color: #494338;
								font-size: 24rpx;
								font-weight: 400;
								font-family: SimSun;
								box-sizing: border-box;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 2;
							}

							.progress {
								// width: 30%;
								height: 100%;
								background: linear-gradient(90deg, #E68B30, #FAD44C);
							}
						}
					}

					.sub_title {
						width: 600rpx;
						height: 70rpx;
						// line-height: 70rpx;
						// text-align: center;
						background: url(#{$baseImageUrl}/bg/title.png) no-repeat;
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 20rpx;
							height: 20rpx;
						}

						text {
							color: #494338;
							font-size: 40rpx;
							font-weight: 400;
							font-family: LiSu;
							margin: 0 15rpx;
						}
					}

					.list {
						display: flex;

						.item {
							margin-right: 10rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.icon {
								width: 80rpx;
								height: 80rpx;
								background: url(#{$baseImageUrl}/common/add_bg.png) no-repeat;
								background-size: 100% 100%;
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 60rpx;
									height: 60rpx;
								}
							}

							text {
								color: #333333;
								font-size: 20rpx;
								font-weight: 400;
								font-family: SimSun;
								margin-top: 10rpx;
							}
						}
					}
				}

				.tabs {
					width: 100%;
					padding: 52rpx 35rpx 92rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;

					.item {
						image {
							width: 100rpx;
							height: 100rpx;
						}

						view {
							color: #FFFFFF;
							font-size: 24rpx;
							font-weight: 400;
							font-family: SimSun;
						}
					}
				}
			}

			.scroll_box {
				width: 100%;
				height: 276rpx;
				padding-top: 70rpx;
				padding-left: 25rpx;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/common/f.png) no-repeat;
				background-size: 100% 100%;
				white-space: nowrap;

				.item {
					display: inline-block;
					width: 152rpx;
					text-align: center;
					margin-right: 40rpx;

					// &:first-child {
					// 	image {
					// 		width: 152rpx;
					// 		height: 152rpx;
					// 	}
					// }

					&.active {
						image {
							width: 152rpx;
							height: 152rpx;
						}
					}

					image {
						width: 116rpx;
						height: 116rpx;
						border-radius: 50%;
					}

					view {
						color: #FFFFFF;
						font-size: 24rpx;
						font-weight: 400;
						font-family: SimSun;
						// margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>